"use client";

import Link from "next/link";
import { Car } from "@/data/cars";
import Image from "next/image";
interface CarCardProps {
  car: Car;
}

export default function CarCard({ car }: CarCardProps) {

  const formatPrice = (price: number) => {
    if (price >= 10000) {
      return `¥${(price / 10000).toFixed(1)}万`;
    }
    return `¥${price.toLocaleString()}`;
  };

  const getTypeColor = (type: string) => {
    switch (type) {
      case "new":
        return "bg-green-500";
      case "used":
        return "bg-orange-500";
      default:
        return "bg-blue-500";
    }
  };

  const getFuelTypeText = (fuelType: string) => {
    switch (fuelType) {
      case "electric":
        return "电动车";
      case "hybrid":
        return "混动车";
      default:
        return "汽油车";
    }
  };

  return (
    <Link href={`/cars/${car.id}`}>
      <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 group cursor-pointer">
        {/* 图片区域 */}
        <div className="relative h-40  overflow-hidden">
          {/* 状态标签 */}
          <div className="absolute top-4 left-4 z-20">
            <span
              className={`${getTypeColor(
                car.type
              )} text-white px-3 py-1 rounded-full text-sm font-semibold`}
            >
              {car.type === "new" ? "新车" : "二手车"}
            </span>
          </div>
          <div className="absolute top-4 right-4 z-20">
            <span className="bg-gray-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
              {getFuelTypeText(car.fuelType)}
            </span>
          </div>
          <div
            className="absolute h-8 w-full left-0 bottom-0    bg-black/50 text-white   flex justify-between items-center px-4 z-20">
            <span className="text-sm">id:&nbsp;484848484</span>
            <span className="text-sm">库存：65</span>
          </div>
          <Image src="/test.jpg" alt="car" fill className="object-cover" />
        </div>

        {/* 内容区域 */}
        <div className="p-2">
          <h3 className="text-sm  text-gray-900 line-clamp-1">{car.name}</h3>
          <div className="text-gray-600 text-sm flex gap-2 my-1">
            <span>{car.year}年</span>/
            <span>{car.year}年</span>/
            <span>{car.year}年</span>
          </div>
          <div className="text-rose-600">{formatPrice(car.price)}</div>
        </div>
        </div>
    </Link>
  );
}


